<template>
  <div class="musicbox">
    <div class="music-top">
      <my-header></my-header>
    </div>
    <div class="music-center">
      <div class="music-left">
        <my-aside></my-aside>
      </div>
      <div class="music-right">
        <keep-alive exclude="mv,musiclyrics,playlist">
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
    <div class="music-bottom">
      <my-audio></my-audio>
    </div>
  </div>
</template>
<script>
import MyAside from "./component/MyAside"
import MyHeader from "./component/MyHeader"
import MyAudio from "../../components/audio/MyAudio"
export default {
  name: "music",
  data() {
    return {
      path: "",
    }
  },
  components: {
    MyAside,
    MyHeader,
    MyAudio,
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      this.path = newVal
    },
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
@media (max-width: 600px) {
  .musicbox {
    width: 100%;
    height: 100% !important;
    background: white;
    .music-center {
      height: 100%;
      width: 100%;
      background: rgb(255, 255, 255);
      .music-left {
        display: block;
        background: #5f94c0;
        color: white;
      }
      .music-right {
        width: 75%;
        height: calc(100% - 1.7rem);
      }
    }
  }
}
@media (min-width: 600px) {
  .musicbox {
    width: 100%;
    height: 100% !important;
    background: white;
    .music-top {
      height: 50px;
    }
    .music-bottom {
      height: 50px;
    }
    .music-center {
      height: calc(100% - 110px);
      width: 100%;
      background: rgb(255, 255, 255);
      display: flex;
      overflow: hidden;
      .music-left {
        width: 200px;
        // background: #dd6d60;
        background: rgb(66, 141, 216);
      }
      .music-right {
        width: calc(100% - 200px);
        height: 100%;
      }
    }
  }
  .router-link-active {
    background: white;
    // color: #dd6d60;
    color: rgb(98, 158, 218);
  }
}
</style>
